<template>
	<view class="fu-p-30">
		<fu-section title="基础案例" customClass="fu-m-t-20" type="line">
			<fu-badge :value="2500"></fu-badge>
		</fu-section>
		
		<fu-section title="直角边形状" customClass="fu-m-t-20" type="line">
			<fu-badge :value="2500" shape="horn"></fu-badge>
		</fu-section>
		
		<fu-section title="徽标数显示方式" customClass="fu-m-t-20" type="line">
			<view class="fu-flex fu-flex-column-center fu-gap-30">
				<fu-badge :value="2525" numberType="ellipsis"></fu-badge>
				<fu-badge :value="2525" numberType="overflow"></fu-badge>
				<fu-badge :value="2525" numberType="limit"></fu-badge>
				<fu-badge :value="25252" numberType="limit"></fu-badge>
			</view>
		</fu-section>
		
		<fu-section title="自定义主题" customClass="fu-m-t-20" type="line">
			<view class="fu-flex fu-flex-column-center fu-gap-30">
				<fu-badge value="25" type="primary"></fu-badge>
				<fu-badge value="25" type="error"></fu-badge>
				<fu-badge value="25" type="warning"></fu-badge>
				<fu-badge value="25" type="success"></fu-badge>
				<fu-badge value="25" type="info"></fu-badge>
			</view>
		</fu-section>
		
		<fu-section title="仅显示点: is-dot 属性" customClass="fu-m-t-20" type="line">
			<fu-badge isDot></fu-badge>
		</fu-section>
	</view>
</template>

<script setup>
	import { computed } from 'vue';
	
	// computed计算属性
	const customStyle = computed(() => {
		return {
			backgroundColor: '#62ed0d',
			color: '#fff'
		}
	})
</script>

<style lang="scss">
	
</style>